<template>
   <div>
    <div class="header">
      <img
        :src="person.avatar_s180"
        alt
      />
      <div>{{person.name}}</div>
    </div>
    <ul class="footer">
      <li v-for="(item,index) in song " :key="index">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import { getTinguid } from "../../api/baidu-music";
import { getSongLis } from "../../api/baidu-music";
export default {
 data() {
    return {
      person: {},
      song: [],
    };
  },
  created() {
    getTinguid(this.$route.params.id).then((res) => {
      console.log(res);
      this.person = res.data;
      console.log(this.person);
    });
    getSongLis(10,this.$route.params.id).then((res) => {
      console.log(res);
      this.song = res.data.songlist;
      console.log(this.song);
    });
  },
};

</script>

<style lang='less' scoped>
.header {
  height: 200px;
  // line-height: 240px;
  text-align: center;
  background-color: #ccc;
  img {
    margin-top: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  div {
    margin-top: 10px;
    font-size: 30px;
  }
}
.footer {
  //
  margin: 0px 10px;
  li {
    border-bottom: 1px solid #999;
    padding: 10px;
  }
}
</style>>